{% extends "pages.html" %}
{% load humanize %}
{% load custom %}
{% load cache %}
{% block subTitle %}{{site_title}}{% endblock %}
{% block script %}
Go2.SetCSRF("{{csrf}}");

var txtUsername;
var txtLink;
var txtTitle;

function Loaded()
{
	txtUsername = document.getElementById('username');

	txtLink = document.getElementById("link");
	txtTitle = document.getElementById("title");
	
	Go2.AddEventFn(txtLink, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			txtTitle.focus();
			evt.preventDefault();
			}
		});

	Go2.AddEventFn(txtTitle, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			Shorten();
			}
		});

	if (txtUsername)
		{
		txtUsername.focus();
		Go2.AddEventFn(txtUsername, "keydown", function(evt)
			{
			if (evt.keyCode == 13)
				Go2.SetUsername(txtUsername.value);
			});
		}
	else
		txtLink.focus();
		
	Go2.DisplayBars(200);
}

function Shorten()
{
	Go2.Map(txtLink.value, txtTitle.value);
}

{% endblock %}

{% block pagebody %}
<div class="head">
	<a target="_top" href="/"><img title="{{site_name}}" class="logo" src="/images/logo.png"></a>
	<h1 style="padding-top: 20px;">{{site_title}}</h1>
	<p class="subhead">{{site_tagline}}</p>
</div>

<div class="left">

<h2>What is {{site_name}}?</h2>
<p>
You can use {{site_name}} to take any long link (URL) and convert it to a shorter one that
you can send in Twitter, IM, or Email messages.  Your link will not only display the page
you want to share, but also add an information box where your readers can comment on your link.
Try it:
</p>
<p style="text-align:center;"><a href="/G">http://{{site_host}}/G</a></p>
<h2>{{site_name}} Benefits:</h2>
<ul>
	<li><b>Comments</b> - Exchange comments with your readers on every link page.</li>
	<li><b>Feedback</b> - see how many people are reading your links.</li>
	<li><b>Personalized</b> - Use a nickname, and get a summary of all
		{% if username %}<a href="/user/{{username}}" title="{{username}}'s activity">{% endif %}
		your shared links.
		{% if username %}</a>{% endif %}
	</li>
	<li><b>Promote</b> - Promote your link by adding one or more "[tags]" to any comment -
	the most popular links for each tag are listed in their own page, for example:
	<p style="text-align:center"><a href="/tag/video">http://{{site_host}}/tag/video</a></p>
	</li>
	<li><b>Shorter than TinyURL</b> - {{site_name}} links are only {{link_length}} characters long - perfect for Twitter messages.</li>
	<li><b>It's Free</b> - add the Bookmarklet to get started.</li>
</ul>

<h2 style="text-align:center;">Take a 4 minute video tour of Go2.me</h2>
<div style="text-align:center;">
	<object width="425" height="344">
		<param name="movie" value="http://www.youtube.com/v/szsHrobNSUk&hl=en&fs=1&rel=0&color1=0x006699&color2=0x54abd6"></param>
		<param name="allowFullScreen" value="true"></param>
		<param name="allowscriptaccess" value="always"></param>
		<embed src="http://www.youtube.com/v/szsHrobNSUk&hl=en&fs=1&rel=0&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
	</object>
</div>

</div> <!-- left -->

<div class="right">

<h2>Install the Bookmarklet:</h2>
<p>To get started, just drag this bookmarklet to your bookmarks toolbar: *</p>
<div class="bookmarklet">
<a class="bookmarklet" title="Drag me to your bookmarks toolbar"
   onclick="alert('Instead of clicking this link, you need to drag it to your toolbar.');return false;"
   href="javascript:location.href='{{host}}map/?url='+encodeURIComponent(location)+'&title='+encodeURIComponent(document.title);">
   <img src="/images/bookmarklet.png" alt="{{site_name}}">
</a>
</div>

<h2>Shorten a link now:</h2>
<p>If you can't install the bookmarklet just now, you can shorten a single link
using this form:</p>
<table style="margin:15px 0;">
<tr><th><label for="link">Link (URL):</label></th><td><input id="link" style="width:350px;" value="http://"/></td></tr>
<tr><th><label for="title">Title (opt):</label></th><td><input id="title" style="width:350px;"/></td></tr>
<tr><th></th><td style="text-align:right;"><input type="button" onclick="Shorten();" value="Shorten"/></td></tr>
</table>

<i>
* Installation instructions for Internet Explorer:
<ul>
	<li>Right click on the {{site_name}} link (above)</li>
	<li>Select "Add to Favorites..."</li>
	<li>Click "Yes" when you see the Security Alert.</li>
	<li>Select "Links" in the "Create In" dropdown.</li>
	<li>Click "Add"</li>
</ul>
</i>

</div> <!-- right -->

{% cache 180 home %}
<div style="clear:both;padding-top:15px;">
<h2>Recently popular links ({{total_pages|intcomma}} links shared to date)</h2>
<table class="scores">
<tr><th></th><th>Title</th><th>Shared</th><th>Viewed</th><th>Comments</th><th>Created</th><th>Score</th></tr>
{% for page in pages %}
	{% if page.ModelExists %}
	<tr>
		<td style="width:18px;"><span style="display:none;" class="ssu Snap_Shot_URL">{{page.model.url|escape}}</span></td>
		<td class="title"><div>
			<a href="/{{page.model.GetId}}" title="{{page.model.url|escape}}">{{page.model.title|escape}}</a>
		</div></td>
		<td class="num">{{page.model.shareCount|intcomma}}</td>
		<td class="num">{{page.model.viewCount|intcomma}}</td>
		<td class="num">{{page.model.CommentCount|intcomma}}</td>
		<td class="age">
			{% if page.model.Creator %}
				<a href="/user/{{page.model.Creator}}">
					<img class="inline" src="/user/{{page.model.Creator}}/picture_thumb"></a>
				<a href="/user/{{page.model.Creator}}">{{page.model.Creator}}</a> -
			{% endif %}
			{{page.model.dateCreated|Age}}
		</td>
		<td style="width:200px;" class="bar"><div class="bar" bar_value="{{page.ScoreNow|mult:24|floatformat:1}}"
			title="{{page.ScoreNow|mult:24|floatformat:1}} points Today">&nbsp;</div></td>
	</tr>
	{% endif %}
{% endfor %}
</table>
</div>
{% endcache %}

{% endblock %}
